<template>
  <div>
    <div class="All">
      <!-- 切换项目 -->
      <div class="tabs">
        <router-link to="/board/Current">
          <button class="active">当前项目</button>
        </router-link>

        <router-link to="/board/allproject">
          <button class="tabs-button">全部项目</button>
        </router-link>

        <router-link to="/board/unpublished">
          <button class="tabs-button">未发布项目</button>
        </router-link>
      </div>

      <!-- 抑郁全面评估 -->
      <div class="Allbox">
        <!-- <img src="../../static/images/board/gengduo.png" alt="" /> -->
        <div class="title">
          <t-dropdown :options="options" trigger="click" @click="clickHandler">
            <t-space>
              <t-button variant="text">
                {{ titlekb }}
                <template #suffix>
                  <t-icon name="chevron-down" size="16"
                /></template>
              </t-button>
            </t-space>
          </t-dropdown>
          <span>【关键指标】</span>
        </div>
        <div class="target">
          <div class="target-four">
            <div class="target-gradient"></div>
            <div class="target-four-title">6890</div>
            <div class="target-four-message">参与人数</div>
          </div>

          <div class="target-four">
            <div class="target-organization"></div>
            <div class="target-four-title">3</div>
            <div class="target-four-message">分支机构</div>
          </div>

          <div class="target-four">
            <div class="target-myChart">
              <div id="myChart"></div>
            </div>
            <div class="target-four-title">5693</div>
            <div class="target-four-message">已测人数</div>
          </div>

          <div class="target-four">
            <div class="target-sun"></div>
            <div class="target-four-title">0</div>
            <div class="target-four-message">阳性筛选</div>
          </div>
        </div>
      </div>

      <!-- 项目测试进度，阳性筛出 -->
      <div class="test">
        <div class="schedule">
          <img src="../../static/images/board/gengduo.png" alt="" />
          <div class="title2">项目测试进度</div>
          <div class="chart-item" id="chart_1"></div>
        </div>
        <div class="sun">
          <img src="../../static/images/board/gengduo.png" alt="" />
          <div class="title2">阳性筛出</div>
          <div class="chart-item" id="chart_2"></div>
        </div>
      </div>

      <!-- 测评项目参与量 -->
      <div class="appraisal">
        <div class="quantity">
          <img src="../../static/images/board/gengduo.png" alt="" />
          <div class="title2">评测项目参与量</div>
          <div id="chart_3"></div>
        </div>
        <div class="distribution">
          <img src="../../static/images/board/gengduo.png" alt="" />
          <div class="title2">阳性筛出分布图</div>
          <div id="chart_4"></div>
        </div>
      </div>

      <!-- 同行业风险平均值同比 -->
      <div class="peer" style="display: none">
        <div class="average">
          <img src="../../static/images/board/gengduo.png" alt="" />
          <div class="title2">同行业项目风险平均值同比</div>
          <div id="chart_5"></div>
        </div>

        <div class="subscribe" style="display: none">
          <img src="../../static/images/board/gengduo.png" alt="" />

          <div class="title2">预约咨询量</div>
          <div id="chart_6"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  toRefs,
  reactive,
  onMounted,
  onUnmounted,
  ref,
  onActivated,
  onDeactivated,
} from "vue";
import {
  getProgressFinishData,
  getProgressNoFinishData,
  getProjectYXData,
  getDayssum,
  getPYXsum,
} from "../../api/eachartsaApi";
import { zcvotelogList } from "../../api/square.js";
import { MessagePlugin } from "tdesign-vue-next";
import * as echarts from "echarts";
import {
  chart_1,
  chart_2,
  chart_3,
  chart_4,
  chart_5,
  chart_6,
} from "../../echats/Current";
export default {
  setup() {
    const state = reactive({
      option: {
        polar: {
          radius: ["100%", "60%"],
          center: ["50%", "50%"],
        },
        angleAxis: {
          max: 70,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            roundCap: true,
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: "#fff",
            },
            data: [60],
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#97CBE7",
                  },
                  {
                    offset: 1,
                    color: "#9AEEDC",
                  },
                ]),
              },
            },
          },
        ],
      },
    });
    let myChart = ref(null);
    let breakoff = ref(false);
    let titlekb = ref("");
    let options = ref([
      { content: "操作一", value: 1 },
      { content: "操作二", value: 2 },
      { content: "操作三", value: 3 },
      { content: "操作四", value: 4 },
    ]);
    const initeCharts = () => {
      myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption(state.option);
    };

    let Echart_1 = ref(null);
    let Echart_2 = ref(null);
    let Echart_3 = ref(null);
    let Echart_4 = ref(null);
    let Echart_5 = ref(null);
    let Echart_6 = ref(null);
    const clickHandler = (data) => {
      api1(data.value);
      api2(data.value);
      api3(data.value);
      api4(data.value);
      MessagePlugin.success("切换成功，当前项目" + "《" + data.content + "》");
      titlekb.value = data.content;
    };
    const apiselet = async () => {
      const res = await zcvotelogList();
      console.log(res);
      let zbc = [{ content: "抑郁全面评估", value: "760" }];
      res.data.forEach((item) => {
        zbc.push({ content: item.Title, value: item.ID.toString() });
      });
      options.value = zbc;
      titlekb.value = options.value[0].content;
    };
    const api1 = async (dataID) => {
      const res = await getProgressFinishData({ voteid: dataID });
      const res1 = await getProgressNoFinishData({ voteid: dataID });
      Echart_1 = echarts.init(document.getElementById("chart_1"));
      let casobj = {
        x: [],
        y: [],
        z: [],
      };
      res.data.forEach((item) => {
        casobj.x.push(item.place);
        casobj.y.push(item.snum);
      });
      res1.data.forEach((item) => {
        casobj.z.push(item.snum);
      });
      if (casobj.x.length === 0) {
        res1.data.forEach((item) => {
          casobj.x.push(item.place);
        });
      }
      const casdata = chart_3(echarts);
      casdata.yAxis.data = casobj.x;
      casdata.series[0].data = casobj.y;
      casdata.series[1].data = casobj.z;
      Echart_1.setOption(casdata);
    };
    const api2 = async (dataID) => {
      const res = await getProjectYXData({ voteid: dataID });
      Echart_2 = echarts.init(document.getElementById("chart_2"));
      let casobj = {
        x: [],
        zs: 0,
      };
      res.data.forEach((item) => {
        casobj.x.push({
          name:
            item.isWarring === 0
              ? "正常人数"
              : item.isWarring === 1
              ? "预警人数"
              : "风险人数",
          value: Number(item.snum),
        });
        casobj.zs += Number(item.snum);
      });
      const casdata = chart_6(echarts);
      casdata.series[0].data = casobj.x;
      casdata.title[0].text = casobj.zs.toString();
      Echart_2.setOption(casdata);
    };
    const api3 = async (dataID) => {
      const res = await getDayssum({ voteid: dataID });
      console.log(res);
      Echart_3 = echarts.init(document.getElementById("chart_3"));
      let casobj = {
        x: [],
        y: [],
      };
      res.data.forEach((item) => {
        casobj.x.push(item.snum);
        casobj.y.push(item.days);
      });
      const casdata = chart_1(echarts);
      casdata.series[0].data = casobj.x;
      casdata.xAxis.data = casobj.y;
      Echart_3.setOption(casdata);
    };
    const api4 = async (dataID) => {
      const res = await getPYXsum({ voteid: dataID });
      console.log(res);
      Echart_4 = echarts.init(document.getElementById("chart_4"));
      let casobj = {
        x: [],
        y: [],
        n: [],
        c: [],
      };
      res.data.forEach((item) => {
        casobj.x.push(item.snum);
        casobj.y.push(Number(item.femaleNum) * -1);
        casobj.n.push(Number(item.maleNum) * -1);
        casobj.c.push(item.place);
      });
      const casdata = chart_5(echarts);
      casdata.yAxis[0].data = casobj.c;
      casdata.series[0].data = casobj.x;
      casdata.series[1].data = casobj.y;
      casdata.series[2].data = casobj.n;
      Echart_4.setOption(casdata);
    };
    onMounted(() => {
      apiselet();
      api1("760");
      initeCharts();
      api2("760");
      api3("760");
      api4("760");
      Echart_4 = echarts.init(document.getElementById("chart_4"));
      Echart_4.setOption(chart_5(echarts));
      Echart_5 = echarts.init(document.getElementById("chart_5"));
      Echart_5.setOption(chart_2(echarts));
      Echart_6 = echarts.init(document.getElementById("chart_6"));
      Echart_6.setOption(chart_4(echarts));
      breakoff.value =true
    });
    onActivated(() => {
      //缓存页面再启动函数
      if (breakoff.value !== true) {
       apiselet();
      api1("760");
      initeCharts();
      api2("760");
      api3("760");
      api4("760");
      Echart_4 = echarts.init(document.getElementById("chart_4"));
      Echart_4.setOption(chart_5(echarts));
      Echart_5 = echarts.init(document.getElementById("chart_5"));
      Echart_5.setOption(chart_2(echarts));
      Echart_6 = echarts.init(document.getElementById("chart_6"));
      Echart_6.setOption(chart_4(echarts));
      }
    });
    onUnmounted(() => {
      if (myChart.value !== null) {
        myChart.dispose();
      }
      if (Echart_1.value !== null) {
        Echart_1.dispose();
      }
      if (Echart_2.value !== null) {
        Echart_2.dispose();
      }
      if (Echart_3.value !== null) {
        Echart_3.dispose();
      }
      if (Echart_4.value !== null) {
        Echart_4.dispose();
      }
      if (Echart_5.value !== null) {
        Echart_5.dispose();
      }
      if (Echart_6.value !== null) {
        Echart_6.dispose();
      }
    });
    return {
      ...toRefs(state),
      clickHandler,
      options,
      titlekb,
    };
  },
};
</script>
<style lang="scss" scoped>
#chart_1 {
  width: 104%;
  height: 400px;
  margin-top: 10px;
}
#myChart {
  height: 100px;
  width: 100px;
  transform: rotateY(180deg);
}
#chart_2 {
  width: 105%;
  height: 400px;
  margin-top: 10px;
}

#chart_3 {
  width: 106%;
  height: 400px;
  margin-top: 10px;
}

#chart_4 {
  width: 100%;
  height: 400px;
  margin-top: 10px;
}

#chart_5 {
  width: 700px;
  height: 400px;
  margin-top: 10px;
}

#chart_6 {
  width: 850px;
  height: 400px;
  margin-top: 10px;
}

.All {
  background-color: rgb(241, 245, 248);
  height: 100%;
  padding: 15px 40px 0 40px;
  a {
    text-decoration: none;
  }

  a {
    font-size: 24px;
  }
  a:link {
    color: blue;
    text-decoration: none;
  }

  a:visited {
    color: #333;
    text-decoration: none;
  }
  .tabs {
    display: flex;
    gap: 32px;

    .tabs-button {
      width: 160px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background-color: rgb(215, 217, 220);
      border-radius: 15px 15px 0 0;
      font-size: 18px;
      border: 0;
      color: #fff;
    }

    .active {
      width: 160px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background-color: #fff;
      border-radius: 15px 15px 0 0;
      font-size: 20px;
      border: 0;
      color: #333;
    }

    .tabs-button:hover {
      background-color: #fff;
      color: #333;
      cursor: pointer;
    }
  }
  .title {
    font-size: 14px;
    margin-top: 20px;
    margin-left: 15px;
  }

  .title2 {
    margin-left: 30px;
    margin-top: 20px;
    font-size: 14px;
  }

  // 当前项目
  .tabs {
    display: flex;
    gap: 32px;

    .active {
      background-color: #fff;
      color: #333;
    }

    button {
      width: 160px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background-color: rgb(215, 217, 220);
      border-radius: 15px 15px 0 0;
      font-size: 24px;
      border: 0;
      color: #fff;
    }
  }

  // 抑郁全面评估
  .Allbox {
    height: 263px;
    width: 100%;
    padding: 0px 20px 0 10px;
    background-color: #fff;
    overflow: hidden;
    border-radius: 0 8px 8px 8px;

    img {
      width: 24px;
      float: right;
      margin-top: 30px;
    }

    span {
      font-size: 14px;
      font-weight: 400;
      color: #6b81a3;
    }

    .target {
      display: flex;
      height: 200px;
      justify-content: space-around;
      // gap: 283px;

      .target-four {
        width: 100px;
        height: 100%;
        text-align: center;
        margin-top: 26px;

        .target-four-title {
          font-size: 28px;
          line-height: 40px;
          line-height: 56px;
        }

        .target-four-message {
          font-size: 16px;
          color: #7b8c95;
          line-height: 22px;
        }

        .target-gradient {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          position: relative;
          background: linear-gradient(
            110deg,
            #97cbe7 28%,
            #9aeedc 65%,
            #9aeedc 86%
          );
        }
        .target-myChart {
          width: 100px;
          height: 100px;
          &::before {
            display: none;
          }
        }
        .target-gradient::before {
          content: "";
          position: absolute;
          top: 20%;
          left: 20%;
          right: 20%;
          bottom: 20%;
          border-radius: 50%;
          background-color: #fff;
          background-clip: content-box;
        }

        .target-organization {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          position: relative;
          background: linear-gradient(
            90deg,
            #97cbe7 28%,
            rgba(151, 203, 231, 0.9) 65%,
            #e0edf5 100%
          );
        }

        .target-organization::before {
          content: "";
          position: absolute;
          top: 20%;
          left: 20%;
          right: 20%;
          bottom: 20%;
          border-radius: 50%;
          background-color: #fff;
          background-clip: content-box;
        }

        .target-myChart {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          position: relative;
        }

        .target-myChart::before {
          content: "";
          position: absolute;
          top: 20%;
          left: 20%;
          right: 20%;
          bottom: 20%;
          border-radius: 50%;
          background-color: #fff;
          background-clip: content-box;
        }

        .target-sun {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          position: relative;
          background: linear-gradient(90deg, #f7acac 50%, #f7acac);
        }

        .target-sun::before {
          content: "";
          position: absolute;
          top: 20%;
          left: 20%;
          right: 20%;
          bottom: 20%;
          border-radius: 50%;
          background-color: #fff;
          background-clip: content-box;
        }
      }
    }
  }

  // 项目测试进度,阳性晒出
  .test {
    display: flex;
    background-color: rgb(241, 245, 248);
    height: 484px;
    margin-top: 10px;
    width: 100%;
    gap: 10px;

    .schedule {
      width: 947px;
      height: 100%;
      background-color: #fff;
      border-radius: 8px;

      img {
        width: 24px;
        float: right;
        margin-top: 30px;
        margin-right: 20px;
      }
    }

    .sun {
      width: 621px;
      height: 100%;
      background-color: #fff;
      border-radius: 8px;

      img {
        width: 24px;
        float: right;
        margin-top: 30px;
        margin-right: 20px;
      }
    }
  }

  // 测评项目参与量
  .appraisal {
    height: 508px;
    width: 100%;
    background-color: rgb(241, 245, 248);
    margin-top: 10px;
    display: flex;
    gap: 10px;

    .quantity {
      width: 716px;
      height: 100%;
      background-color: #fff;

      img {
        width: 24px;
        float: right;
        margin-top: 30px;
        margin-right: 20px;
      }
    }

    .distribution {
      width: 852px;
      height: 100%;
      background-color: #fff;

      img {
        width: 24px;
        float: right;
        margin-top: 30px;
        margin-right: 20px;
      }
    }
  }

  // 同行业项目风险平均值同比
  .peer {
    height: 508px;
    width: 1600px;
    background-color: rgb(241, 245, 248);
    margin-top: 38px;
    display: flex;
    gap: 32px;

    .average {
      width: 716px;
      height: 100%;
      background-color: #fff;

      img {
        position: relative;
        left: 674px;
        width: 24px;
        top: 32px;
      }
    }

    .subscribe {
      width: 852px;
      height: 100%;
      background-color: #fff;

      img {
        width: 24px;
        position: relative;
        left: 812px;
        top: 32px;
      }
    }
  }
}
</style>
